<template>
  <el-header id="top">
    <el-menu router mode="horizontal" background-color="#fff" text-color="#fff">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/list' }"
          >商品添加</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/soc' }"
          >商品查询
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/soc' }"></el-breadcrumb-item>
      </el-breadcrumb>
      <div class="primary">
        <i class="el-icon-full-screen" @click="screen" id="quanpin"></i>
      </div>
      <el-dropdown>
        <div class="avatar">
          <el-avatar :src="userInfo.avatar"></el-avatar>
        </div>
        <span class="el-dropdown-link">
          {{ username }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu>
          <el-dropdown-item @click.native="drawer = true" type="primary"
            >个人中心</el-dropdown-item
          >
          <el-dropdown-item @click.native="logOut">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-drawer
        title="个人中心"
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleClose"
      >
        <div class="avatar-22">
          <el-avatar :src="userInfo.avatar"></el-avatar>
        </div>
        <el-button type="primary" class="xiugai" @click.stop="uploadHeadImg"
          >修改头像</el-button
        >
        <el-form
          :model="ruleForm"
          status-icon
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="账号" prop="username">
            <el-input :disabled="true" v-model="username"></el-input>
          </el-form-item>
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="修改密码:">
            <el-input v-model="ruleForm.password" style="width: 90%"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio v-model="radio" label="1">男</el-radio>
            <el-radio v-model="radio" label="2">女</el-radio>
          </el-form-item>
          <el-button type="primary" @click="alter">保存</el-button>
          <el-button>重置</el-button>
        </el-form>
        <input
          type="file"
          accept="image/*"
          @change="handleFile"
          class="hiddenInput"
        />
      </el-drawer>
    </el-menu>
  </el-header>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      // 初始头像
      userInfo: {
        avatar: require("../../public/img/touxiang.jpg"),
      },
      // 性别默认第一个选项
      radio: "1",
      // 用户名密码
      ruleForm: {
        username: localStorage.getItem("usr"),
        password: "",
      },
      //接收用户名
      username: localStorage.getItem("usr"),
      //个人中心也默认为假
      drawer: false,
      //显示方向
      direction: "rtl",
      //获取的index的值为-1
      alterindex: -1,
      //后台账号密码
      tableData: [],
      //全屏
      fullscreen: false,
    };
  },

  mounted() {
    this.getfruits();
  },
  methods: {
    //全屏
    screen() {
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
    // 获取账号密码
    getfruits() {
      axios
        .get("http://127.0.0.1:3000/sign")
        .then((res) => {
          this.tableData = res.data;
          for (let i = 0; i < this.tableData.length; i++) {
            if (this.ruleForm.username == this.tableData[i].username) {
              this.alterindex = i;
              console.log(res.data);
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //修改密码
    alter() {
      axios
        .put(`http://127.0.0.1:3000/alter/${this.alterindex}`, {
          modfruit: this.ruleForm,
        })
        .then(() => {
          this.alterindex = -1;
          this.drawer = false;
          localStorage.clear();
          this.$router.push("/login");
          this.$message.success("密码已更改请重新登录");
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 打开图片上传
    uploadHeadImg: function () {
      this.$el.querySelector(".hiddenInput").click();
    },
    // 将头像显示
    handleFile: function (e) {
      let $target = e.target || e.srcElement;
      let file = $target.files[0];
      var reader = new FileReader();
      reader.onload = (data) => {
        let res = data.target || data.srcElement;
        this.userInfo.avatar = res.result;
      };
      reader.readAsDataURL(file);
    },
    //退出登录
    logOut() {
      localStorage.clear();
      this.$router.push("/login");
    },
    //个人中心也关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
  },
};
</script>
<style>
.el-dropdown {
  float: right;
  cursor: pointer;
}
#id {
  background-color: #fff;
}
/* .box3 {
  width: 130px;
  height: 50px;
  float: left;
  position: absolute;
} */
.el-breadcrumb,
:focus {
  outline: none;
}
.el-dropdown-menu:focus {
  outline: none;
}
.el-breadcrumb {
  float: left;
  margin-top: 20px;
}
.avatar {
  margin-top: 5px;
  height: 10px;
  margin-right: 10px;
  float: left;
}
.avatar-22 span {
  width: 100px;
  height: 100px;
}
.xiugai {
  /* float: left; */
  width: 100%;
  height: 50px;
}
.hiddenInput {
  display: none;
}
.primary{
  width: 50px;
  height: 1px;
  font-size: 20px;
  float: left;
  margin-left: 1240px;
}
</style>